<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import _ from 'lodash'
import { mapState, mapActions } from 'vuex'
import { groupMapBySize } from '@/data/index.js'
import { fetchDirectoryData } from '@/api/group.js'

export default {
  name: 'App',
  computed: {
    ...mapState('study', ['globalGroupMapBySize'])
  },
  async created() {
    console.log('App Created 执行多少次')

    const numbers = Object.keys(groupMapBySize)
    const temp = _.cloneDeep(groupMapBySize)

    const requests = numbers.map((number) =>
      fetchDirectoryData(number).then(
        (res) => {
          const randomObj = res.data.data.reduce((acc, item) => {
            return { ...acc, ...item.content }
          }, {})
          Object.assign(temp[number], randomObj)
        },
        (error) => {
          // 在请求失败时做一些处理，可以是记录错误或使用默认数据
          console.error(`请求分组数据失败: ${number}`, error)
        }
      )
    )

    try {
      // 使用 Promise.allSettled 而不是 Promise.all
      await Promise.allSettled(requests)

      // 这里仍然可以正常更新 globalGroupMapBySize
      this.setGlobalGroupMapBySize(temp)
    } catch (error) {
      console.error('致命错误，请求分组数据失败！', error)
    }
  },
  methods: {
    ...mapActions('study', ['setGlobalGroupMapBySize'])
  }
}
</script>

<style lang="scss">
.topPanel,
.rightPanel {
  .handle-button {
    opacity: 0.75 !important;
  }
}
.rightPanel-container {
  .handle-button {
    background-color: #bae0ff !important;
  }
}
.app-cotainer__right-panel {
  .rightPanel {
    z-index: 40001;
  }
  .handle-button {
    background-color: #b7eb8f !important;
  }
}
.app-cotainer__top-panel {
  .topPanel {
    z-index: 40002;
  }
  .handle-button {
    background-color: #ffccc7 !important;
  }
}
</style>
